<template>
  
</template>

<script>
import axios from "axios"
export default {
  mounted(){
    let that = this;
    deviceData.forEach((item)=>{
        switch(item["设备品牌"]) {
          case "海康":
            that.$cp.addBillboardTwinkle(item["序号"],[item["lon"], item["lat"], item["height"]],jiankong,'leftClick',that.handleLeftClick);
            that.$cp.addTiles(jiankongUrl,item["matrix"])
            break;
          case "顺水":
            that.$cp.addBillboard(item["序号"],[item["lon"],item["lat"],item["height"]],shuibiao,'leftClick',that.handleLeftClick)  
            that.$cp.addTiles(shuibiaoUrl,item["matrix"])
            break;
          case "华仪":
            that.$cp.addBillboard(
              item["序号"],
              [item["lon"],item["lat"],item["height"]],
              dianbiao,
              'leftClick',
              that.handleLeftClick
            )  
            that.$cp.addTiles(dianbiaoUrl,item["matrix"])
            break;
          case "大华":
            that.$cp.addBillboard(
              item["序号"],
              [item["lon"],item["lat"],item["height"]],
              yanwu,
              'leftClick',
              that.handleLeftClick
            )    
            that.$cp.addTiles(yanwuUrl,item["matrix"])
            break;
          case "德安":
            that.$cp.addBillboard(
              item["序号"],
              [item["lon"],item["lat"],item["height"]],
              penlin,
              'leftClick',
              that.handleLeftClick
            )    
            that.$cp.addTiles(penlinUrl,item["matrix"])
            break;
          case "必达":
            that.$cp.addBillboard(
              item["序号"],
              [item["lon"],item["lat"],item["height"]],
              menjin,
              'leftClick',
              that.handleLeftClick
            )  
            that.$cp.addTiles(menjinUrl,item["matrix"])  
            break;
          case "苏里":
            that.$cp.addBillboard(
              item["序号"],
              [item["lon"],item["lat"],item["height"]],
              yinxiang,
              'leftClick',
              that.handleLeftClick
            )    
            that.$cp.addTiles(yinxiangUrl,item["matrix"])  
            break;
          case "米科":
            that.$cp.addBillboard(
              item["序号"],
              [item["lon"],item["lat"],item["height"]],
              wendu,
              'leftClick',
              that.handleLeftClick
            )   
            that.$cp.addTiles(wenduUrl,item["matrix"])  
            break;
        } 
    })
  },
  methods:{
    //绑定点击事件
    handleLeftClick(entity) {
			this.addBoundInfoBox(entity.position._value, "eq_detail")
    },
    //点击显示详细信息
    addBoundInfoBox(positionValue, elementId) {
			const oneDiv = window.document.getElementById(elementId)
			oneDiv.style.display = 'block'
			this.preRenderListener = viewer.scene.preRender.addEventListener(function() {
				let elWidth = oneDiv.offsetWidth
				let elHeight = oneDiv.offsetHeight // + 60
				const scratch = new Cesium.Cartesian2() //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
				let domPosition = positionValue
				const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(domPosition, scratch) //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标
				if (Cesium.defined(canvasPosition)) {
					// 根据元素宽高及当前点屏幕坐标进行偏移
					oneDiv.style.top = canvasPosition.y - elHeight * 1.2 + 'px'
					oneDiv.style.left = canvasPosition.x - elWidth / 2 + 'px'
				}
			})
    },
    //关闭广告牌
    hiddenInfoBox(event) {
			//Object.keys
			const oneDiv = window.document.getElementById("eq_detail")
            oneDiv.style.display = 'none'
    },
    //移除自定义信息框
		removeBoundInfoBox() {
			// // 移除元素
			// if (oldBoundInfoBox) {
			// 	oldBoundInfoBox.style.display = 'none'
			// 	oldBoundInfoBox = null
			// }
			// 移除监听事件
			if (this.preRenderListener) {
				this.preRenderListener()
				this.preRenderListener = null
			}
		},
  }
};
</script>
<style>
.toolbar .el-menus .el-dropdown {
  color: #fff;
}
</style>
<style lang="stylus" scoped>
@import '../../assets/css/varibles.styl';
.buttons {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2%;
  z-index: 9;
  display: flex;
  align-items: center;
}
</style>